<template>
  <div class="box">
    <p class="title">新增图片</p>
    <el-form :model="list" status-icon ref="form" label-width="110px" :rules="rules">
      <el-form-item label="标题" prop="title">
        <el-input v-model="list.title"></el-input>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input v-model.number="list.sort"></el-input>
      </el-form-item>
      <el-form-item label="连接地址" prop="link">
        <el-input v-model="list.link"></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model.number="list.status" placeholder="请选择">
          <el-option label="禁用" :value="0"></el-option>
          <el-option label="启用" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="类型" prop="type">
        <el-select v-model.number="list.type" placeholder="请选择">
          <el-option label="banner" :value="1"></el-option>
          <el-option label="广告" :value="2"></el-option>
          <el-option label="分享海报" :value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="图片地址" prop="thumb">
        <el-upload ref="upload" action="https://api.lktehui.com/admin/upload/upload" name="image" :limit="1"  list-type="picture" :on-success="uploadImgSuccess">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-form-item>
      
      <el-form-item class="all-handle-btn-box">
        <el-button type="primary" @click="handleCertain">确定</el-button>
        <router-link class="back-btn" to="/image/list"><el-button>返回</el-button></router-link>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
      return {
        list: {},
        rules: {
          title: {required: true, message: '标题不能为空', trigger: 'change'},
          sort: {required: true, message: '排序不能为空', trigger: 'change'},
          link: {required: true, message: '连接地址不能为空', trigger: 'change'},
          status: {required: true, message: '状态不能为空', trigger: 'change'},
          type: {required: true, message: '类型不能为空', trigger: 'change'}
        }
      }
    },
    methods: {
      handleCertain() {
        const _this = this;
        this.$refs.form.validate(bool => {
          if (bool) {
            this.$confirm("您确定要添加么?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(() => {
              this.$ajax({
                url: "banner/add",
                data: {
                  app: this.list
                },
                perfect(con, res) {
                  _this.$message({
                    type: "success",
                    message: res.data.msg
                  });
                  _this.$refs.form.resetFields();
                  _this.$refs.upload.clearFiles();
                },
                success(res) {
                  if (res.data.code !== 1) {
                    _this.$message({
                      type: "warning",
                      message: res.data.msg
                    });
                  }
                }
              });
            }).catch(() => {});
          }
        });
      },
      uploadImgSuccess(response, file, fileList) {
        if (response.code === 1) {
          this.list.thumb = response.content;
        } else {
          this.$message({
            type: "warning",
            message: response.msg
          });
        }
      }
    }
};
</script>

<style scoped>
.box {
  padding: 30px;
}
.el-form {
  width: 50%;
  margin: 0 auto;
}
.title {
  margin-bottom: 20px;
  font-size: 20px;
  text-align: center;
}
.back-btn {
  margin-left: 10px;
}
</style>
